<!-- /tourism-未分包版/pages_sub/index/local-circles-detail/local-circles-detail.vue -->
<template>
	<view class="local-circles-detail-page">
		<!-- 1. 自定义导航栏 (简化版) -->
		<view class="custom-navbar" :class="{ 'is-sticky': isNavbarSticky }" :style="{ paddingTop: statusBarHeight + 'px' }">
			<u-icon name="arrow-left" color="#000" size="22" @click="goBack"></u-icon>
			<view class="nav-center">
				<view :style="{'color':isNavbarSticky?'#000':'#000'}">本地圈详情</view>
			</view>
			<u-icon name="share-square"  color="#000" size="22" @click="showMoreOptions"></u-icon>
		</view>

		<!-- 2. 主滚动区域 -->
		<scroll-view scroll-y class="main-content" @scroll="handleScroll">
			<!-- 顶部媒体轮播 --> 
			<view class="media-swiper-container">
				<u-swiper
					v-if="mediaList.length > 0"
					:list="mediaList"
					keyName="url"
					@change="e => swiperCurrent = e.current"
					:autoplay="false"
					indicator
					indicatorMode="none"
					height="250px"
					imgMode="aspectFill"
					radius="0"
					indicatorStyle="bottom:20rpx;"
					indicatorActiveColor="#ffaa0c"
				></u-swiper>
				<!-- 轮播图骨架屏 -->
				<u-skeleton v-else rows="0" title :avatar="false" loading height="250px" titleHeight="250px" titleWidth="100%"></u-skeleton>
				<view class="swiper-indicator">{{ swiperCurrent + 1 }}/{{ mediaList.length }}</view>
			</view>

			<!-- 帖子内容 -->
			<view class="post-content-wrapper">
                <!-- 作者信息区域 (这是与 rich-post-detail 的主要区别) -->
                <view class="author-section">
                    <view class="author-left">
                        <u-avatar :src="postDetail.author.avatar" size="45" mode="aspectFill"></u-avatar>
                        <view class="author-info">
                            <text class="author-name">{{ postDetail.author.name }}</text>
                            <!-- <text class="publish-time">发布于 {{ formatDate(postDetail.createTime) }}</text> -->
                        </view>
                    </view>
                    <view class="author-right">
                        <u-button
                            shape="circle"
                            size="mini"
                            :text="isFollowed ? '已关注' : '+ 关注'"
							:plain="!isFollowed"
							:color="isFollowed ? '#f0f0f0' : '#f81217'"
                            :customStyle="followButtonStyle"
                            @click="onFollow"
							
                        ></u-button>
                    </view>
                </view>

				<view class="post-title">{{ postDetail.title || '' }}</view>
				<view class="post-text">
					<text>{{ postDetail.content }}</text>
				</view>
				
				<view class="tags-section" v-if="postDetail.postTopics && postDetail.postTopics.length > 0">
					<text class="tag-item" v-for="(tag, index) in postDetail.postTopics" :key="index">#{{ tag.title }}</text>
				</view>

				<view class="publish-info">
					<view class="">
						<text class="info-location-text">发布于 {{ formatDate(postDetail.createTime) }}</text>
						<text>{{ formatLocation(postDetail.location) }}</text>
					</view>
					<view class="view-count">
						<u-icon name="eye" color="#999" size="16"></u-icon>
						<text>浏览量 {{ postDetail.viewCount | formatLikes }}</text>
					</view>
				</view>
			</view>
			
			<view class="content-separator"></view>
			
			<!-- 评论区 -->
			<view class="comment-section" id="comment-section">
				<view class="section-title comment-title">
					<text>评论 {{ tableTotal }}</text>
				</view>
				<CComment
					ref="ccRef"
					:userInfo="authorInfo"
					:tableData="tableData"
					:tableTotal="tableTotal"
					@likeFun="likeFun"
					@avatarFun="avatarFun"
					@replyFun="replyFun"
					@deleteFun="deleteFun"
				></CComment>
				<view v-if="tableData.length > 5" class="more-comments" @click="viewMoreComments">
					<text>点击查看更多评论</text>
					<u-icon name="arrow-down" color="#999" size="14"></u-icon>
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="input-placeholder" @click="focusComment">
				<u-icon name="edit-pen" color="#999" size="18"></u-icon>
				<text>说点什么吧...</text>
			</view>
			<view class="action-icons">
				<view class="icon-item" @click="handleLikePost">
					<u-icon :name="postDetail.isLiked ? 'heart-fill' : 'heart'" :color="postDetail.isLiked ? '#ff5050' : '#333'" size="24"></u-icon>
					<text>{{ postDetail.likeCount | formatLikes }}</text>
				</view>
				<view class="icon-item" @click="handleCollectPost">
					<u-icon :name="postDetail.isCollected ? 'star-fill' : 'star'" :color="postDetail.isCollected ? '#ffc428' : '#333'" size="24"></u-icon>
					<text>{{ postDetail.collectCount | formatLikes }}</text>
				</view>
				<view class="icon-item" @click="share">
					<u-icon name="share" color="#333" size="24"></u-icon>
					<text>{{ postDetail.shareCount | formatLikes }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CComment from "@/components/XJ-comment/index";
	import { getPostDetails, getClientFollow, getCommentList, addComment, postClientLike, postCancelLike, postClientCollect, postCancelCollect } from '@/request/api.js';

	export default {
		components: { CComment },
		data() {
			return {
				isNavbarSticky: false, // 控制导航栏背景
				statusBarHeight: 0,
				navBarHeight: 0,
				postDetail: { author: {} }, // 初始化以避免访问undefined
				mediaList: [],
				isFollowed: false,
				swiperCurrent: 0,
				tableData: [],
				tableTotal: 0,
				authorInfo: {},
			};
		},
		filters: {
			formatLikes(val) {
				if (typeof val !== 'number') return val;
				if (val >= 10000) return (val / 10000).toFixed(1) + 'w';
				if (val >= 1000) return (val / 1000).toFixed(1) + 'k';
				return val;
			}
		},
		computed: {
			followButtonStyle() {
				return {
					color: this.isFollowed ? '#666' : '#f81217',
					border: this.isFollowed ? 'none' : '1px solid #f81217',
					width: '100rpx'
				};
			},
		},
		onLoad(options) {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			this.navBarHeight = systemInfo.statusBarHeight + 44;
			
			const eventChannel = this.getOpenerEventChannel();
			if (eventChannel && eventChannel.on) {
				eventChannel.on('acceptDataFromCirclePage', ({item}) => {
					this.loadDetailData(item.id);
				});
			}
		},
		methods: {
			handleScroll(e) {
				this.isNavbarSticky = e.detail.scrollTop > 30;
			},
			// 模拟加载数据
			loadDetailData(id) {
				uni.showLoading({ title: '加载中...' });

				// 模拟数据结构，基于您提供的截图
				const mockData = {
					id: 1, 
					author: {
						avatar: 'https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp',
						name: '老淮安探索家',
					},
					isFollowed: false, 
					title: '带大家回顾一下30年前的老淮安, 这些被拆的老建筑, 你都还记得吗?',
					content: '三十年前的老淮安，青石板路蜿蜒穿城。镇淮楼旁的百年茶馆飘着茶香，跨下桥边的老澡堂蒸汽氤氲，北门大街的木质骑楼连成片，巷弄里的青砖黛瓦排着队。\n那些被拆的老建筑，是卖糖画的老张、纳鞋底的李婶，是暮色里家家户户升起的炊烟，藏着一代人最暖的念想。\n以前的城区老风貌，如今只能通过老照片回忆了。你的手机里又藏了多少老淮安的记忆呢？一起发在评论区里看看吧～',
					mediaList: [
						{ url: 'https://images.unsplash.com/photo-1544588448-13A4956157f1?q=80&w=2071&auto=format&fit=crop', type: 'image' },
						{ url: 'https://images.unsplash.com/photo-1594481552494-1a3b9847e18b?q=80&w=2070&auto=format&fit=crop', type: 'image' }
					],
					postTopics: [{title: '回忆杀'}, {title: '老照片'}, {title: '80年代回忆'}, {title: '老淮安'}],
					createTime: '2025-07-16',
					location: '淮安市',
					viewCount: 2600,
					likeCount: 1500,
					collectCount: 800,
					shareCount: 120,
					isLiked: false,
					isCollected: true,
					commentCount: 552
				};

				setTimeout(() => {
					this.postDetail = mockData;
					this.mediaList = mockData.mediaList;
					this.isFollowed = mockData.isFollowed;
					this.authorInfo = mockData.author;
					this.tableTotal = mockData.commentCount;
					
					// 模拟加载评论
					this.fetchComments();

					uni.hideLoading();
				}, 500);
			},

			fetchComments() {
				// 模拟评论数据
				this.tableData = [
					{ id: 101, parent_id: null, reply_id: null, user_id: 2, user_name: 'ALISA', user_avatar: 'https://picsum.photos/seed/avatar1/100/100', user_content: '这些泛黄的老照片，真是我们一辈人的回忆！如今看到，还是满满回忆！', is_like: true, like_count: 654, create_time: '07-16 12:22' },
					{ id: 102, parent_id: null, reply_id: null, user_id: 3, user_name: '咕噜咕噜', user_avatar: 'https://picsum.photos/seed/avatar2/100/100', user_content: '当年清江商场路口的大球谁还记得？一个地标性建筑就这样被拆了！太可惜了。', is_like: false, like_count: 654, create_time: '07-16 15:30' },
					{ id: 103, parent_id: 102, reply_id: 3, reply_name: '咕噜咕噜', user_id: 4, user_name: '南希', user_avatar: 'https://picsum.photos/seed/avatar3/100/100', user_content: '记得！现在变得空荡荡的。', is_like: false, like_count: 2, create_time: '07-16 16:50' },
					{ id: 104, parent_id: 102, reply_id: 4, reply_name: '南希', user_id: 3, user_name: '咕噜咕噜', user_avatar: 'https://picsum.photos/seed/avatar2/100/100', user_content: '是的，真的很怀念', is_like: false, like_count: 0, create_time: '07-16 20:29' },
				];
			},
			goBack() { uni.navigateBack(); },
			showMoreOptions() { uni.showToast({ title: '更多操作', icon: 'none' }); },
			share() { uni.showToast({ title: '分享', icon: 'none' }); },
			onFollow() { this.isFollowed = !this.isFollowed; },
			formatDate(dateStr) { return dateStr ? dateStr.split(' ')[0].replace(/-/g, '.') : ''; },
			formatLocation(locationStr) { return locationStr || ''; },
			focusComment() {
				uni.pageScrollTo({
					selector: '#comment-section',
					duration: 300,
					success: () => {
						this.$refs.ccRef.newCommentFun();
					}
				});
			},
			handleLikePost() {
				this.postDetail.isLiked = !this.postDetail.isLiked;
				this.postDetail.likeCount += this.postDetail.isLiked ? 1 : -1;
			},
			handleCollectPost() {
				this.postDetail.isCollected = !this.postDetail.isCollected;
				this.postDetail.collectCount += this.postDetail.isCollected ? 1 : -1;
			},
			likeFun(params, callback) { console.log("likeFun", params); },
			avatarFun(id) { console.log("avatarFun", id); },
			replyFun(params, callback) { console.log("replyFun", params); callback({ id: Math.random() }); },
			deleteFun({ params, mode }, callback) { console.log("deleteFun", params, mode); callback(); },
			viewMoreComments() { this.focusComment(); }
		}
	};
</script>

<style lang="scss" scoped>
.local-circles-detail-page {
	background-color: #ffffff; // 页面背景白色
	padding-bottom: 120rpx;
}

.custom-navbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 999;
	display: flex; align-items: center; justify-content: space-between;
	height: 44px; padding: 0 30rpx;
	// 导航栏可以保持透明或设置一个渐变背景
	background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
	&.is-sticky {
		background: none;
		background-color: #fff;
		box-shadow: 0 8rpx 10rpx rgba(0, 0, 0, 0.06);
		// border-bottom: 1rpx solid #f0f0f0;
	}
}

.main-content {
	height: calc(100vh - 120rpx);
	background-color: #fff; 
}

.media-swiper-container {
	width: 100%;
	position: relative;
	.swiper-indicator {
		position: absolute;
		bottom: 20rpx;
		right: 30rpx;
		background-color: rgba(255,255,255,0.4);
		color: #fff;
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
	}
}

.post-content-wrapper {
	padding: 30rpx;
	background-color: #fff;
	position: relative;
    
    .author-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;

        .author-left {
            display: flex;
            align-items: center;
        }

        .author-info {
            margin-left: 20rpx;
            display: flex;
            flex-direction: column;

            .author-name {
                font-size: 30rpx;
                font-weight: bold;
                color: #333;
            }
            .publish-time {
                font-size: 24rpx;
                color: #999;
                margin-top: 4rpx;
            }
        }
    }

	.post-title { font-size: 36rpx; font-weight: bold; margin-bottom: 20rpx; line-height: 1.4; }
	.post-text { font-size: 30rpx; line-height: 1.8; color: #333; margin-bottom: 30rpx; }
	.tags-section {
		margin-bottom: 30rpx;
		.tag-item { color: #FE6B28; margin-right: 20rpx; font-size: 28rpx; }
	}
	.publish-info {
		font-size: 24rpx; color: #b0b0b0; 
		display: flex; 
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		.info-location-text{
			margin-right: 12rpx;
		}
		.view-count { display: flex; align-items: center; font-size: 24rpx; color: #999; font-weight: normal; text {margin-left: 8rpx;} }
	}
}

.content-separator {
    height: 20rpx;
    background-color: #f7f8fa; // 使用一个浅灰色作为分割色
}
.comment-section {
	margin-top: 16rpx; background-color: #fff; padding: 30rpx;
	.section-title {
		display: flex; justify-content: space-between; align-items: center;
		font-size: 28rpx; font-weight: bold; margin-bottom: 30rpx;
	}
	
}

.more-comments {
	text-align: center; color: #507daf; font-size: 26rpx; padding-top: 30rpx;
	display: flex; align-items: center; justify-content: center;
	text { margin-right: 5rpx; }
}

.bottom-bar {
	position: fixed; bottom: 0; left: 0; right: 0;
	height: 100rpx; background-color: #fff; border-top: 1rpx solid #f0f0f0;
	display: flex; align-items: center; padding: 0 30rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.input-placeholder {
		flex: 1; height: 72rpx; background-color: #f4f4f4;
		border-radius: 36rpx; display: flex; align-items: center;
		padding: 0 24rpx; font-size: 28rpx; color: #999;
		text { margin-left: 10rpx; }
	}
	.action-icons {
		display: flex; align-items: center; margin-left: 20rpx;
		.icon-item {
			display: flex; align-items: center; margin-left: 30rpx;
			font-size: 24rpx; color: #333;
			text { margin-left: 6rpx; }
		}
	}
}
</style>